import React from 'react';
import { View, StyleSheet, Text, DatePickerAndroid, Picker } from 'react-native';
import { List, Flex, InputItem, Button, DatePicker, PickerView, Modal } from 'antd-mobile-rn';
import constants from '../../utils/constants';
import DatePickerStyle from 'antd-mobile-rn/lib/picker/style/index.native';
import moment from 'moment';
import ScorePopup from '../../components/scorePopup';

const DatePickerNewStyle = {
    ...DatePickerStyle,
    actionText: {
        color: constants.themeColor,
        textAlign: "center",
        fontSize: 18,

    }
}



const styles = StyleSheet.create({
    itemTag: {
        padding: 20,
        alignItems: "center",


    },
    tag: {
        marginRight: 50,
        marginLeft: 10,
        backgroundColor: "#000",





    }
});

class BtnTags extends React.Component {


    componentWillMount() {

        // DatePickerAndroid.open().then((value)=>{
        //     console.log("s::",value);
        // })
    }

    constructor(props) {
        super(props);
        const style = {
            paddingLeft: 15,
            paddingRight: 15,
            paddingTop: 5,
            paddingBottom: 5,
            borderWidth: 1,
            borderRadius: 3,
            fontSize: 14,
            marginRight: 50,
            overflow: 'hidden'
        }

        this.state = {

            tags: this.props.tags.map(title => { return { title: title, selected: false } }),
            style: Object.assign({ borderColor: "#999" }, style),
            activeStyle: Object.assign({
                backgroundColor: constants.themeColor,
                color: "#ffffff",
                borderColor: constants.themeColor

            }, style)
        }

    }

    handleClick = (tag) => {

        const tags = this.state.tags.map(t => {
            return tag.title === t.title ? { title: t.title, selected: true } : { title: t.title, selected: false };
        });

        this.setState({
            tags: tags
        });
        if (this.props.onChange) {
            this.props.onChange(tag.title);
        }
    }



    render() {
        const activeStyle = this.state.active ? this.state.activeStyle : this.state.style;
        return (
            <Flex style={styles.itemTag}>
                {
                    this.state.tags.map(tag => {
                        return (
                            <Text key={tag.title} tag={tag} style={tag.selected ? this.state.activeStyle : this.state.style} onPress={() => {
                                this.handleClick(tag);
                            }} >{tag.title}</Text>
                        )
                    })
                }

            </Flex>

        )
    }

}

export default class RegisterTags extends React.Component {

    static navigationOptions = (e) => {
        //console.log("nvs::",e)
        const { state } = e.navigation;
        return {
            headerTintColor: 'black',
            headerBackTitle: null,
            headerRight: (
                <Text style={{ marginRight: 10 }}>{state.params ? state.params.rightText : ""}</Text>
            )
        }
    }

     /**
     * 设置 state
     * @param {*} name 
     * @param {*} data 
     */
    stateHanlde(name,data){
        let form = this.state[name];
        Object.keys(data).forEach((k)=>{
            form[k] = data[k];
        });
        this.setState({
            [name]:form
        });
    }

    componentWillMount() {
        this.setHeaderRightText("1/4");
    }


    constructor(props) {
        super(props);
        this.state = {
            showTag: "bk",
            step1: {
                exam: ""
            },
            step2: {
                enroll: "",
                enrollDate: ""
            },
            step3:{
                examScore:"",
                targetScore:""
            },
            pickerViewValue: null,
            dataList: null,
            currentSelected: [
                "7", "7", "7", "7"
            ]
        }


    }

    setHeaderRightText = (text) => {
        const { navigation } = this.props;
        navigation.setParams({
            rightText: text
        })
    }

    //备考
    handleBKClick = () => {


        this.setState({
            showTag: "ks"
        })
        this.setHeaderRightText("2/4");
    }

    render() {
        //
        const data = [0, 0.5, 1, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5].map(value => { return { label: value + "", value: value + "" } });
        const dataList = [
            data,

        ];

        //console.log("dataList ", dataList);
        const { navigation } = this.props;
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, display: this.state.showTag === 'bk' ? "flex" : "none" }}>
                    <List renderHeader={() => { return '你的备考状态' }} >
                        <BtnTags
                            tags={["未考试", "刷分中"]}
                        />
                    </List>
                    <View style={{ padding: 20 }}>
                        <Button
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}
                            onClick={this.handleBKClick}

                        >
                            下一步
                    </Button>
                    </View>
                    <View style={{ padding: 20 }}>
                        <Button
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}
                            onClick={()=>{
                                navigation.navigate("Home")
                            }}

                        >
                            跳过，以后完善
                    </Button>
                    </View>
                </View>
                <View style={{ flex: 1, display: this.state.showTag === 'ks' ? "flex" : "none" }}>
                    <List renderHeader={() => { return '你的报名状态' }} >
                        <BtnTags
                            tags={["已报名", "未报名"]}
                            onChange={(value) => {
                                this.setState({
                                    step2: {
                                        enroll: value
                                    }
                                })
                            }}
                        />

                    </List>
                    <List renderHeader={() => { return '考试时间' }}>
                        <DatePicker styles={DatePickerNewStyle} format="YYYY-MM-DD" minDate={new Date()} mode="date" onOk={(value) => {
                            console.log("rt::", value);
                            this.setState({
                                step2: {
                                    enrollDate: value
                                }
                            })
                        }}>
                            <List.Item arrow="horizontal">
                                <Text style={{ color: "#999" }}>{this.state.step2.enrollDate ? moment(this.state.step2.enrollDate).format("YYYY-MM-DD") : "输入预计考试时间"}</Text>
                            </List.Item>
                        </DatePicker>
                    </List>
                    <View style={{ padding: 20 }}>
                        <Button
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}
                            onClick={() => {
                                this.setState({
                                    showTag: "step3"
                                });
                                this.setHeaderRightText("3/4");
                            }}

                        >
                            下一步
                    </Button>
                    </View>
                </View>
                <View style={{ flex: 1, display: this.state.showTag === 'step3' ? "flex" : "none" }}>
                    <List renderHeader={() => { return '备考宣言' }} >
                        <InputItem placeholder="输入内容"></InputItem>
                    </List>
                    <List renderHeader={() => { return '目标分数' }} >
                        <List.Item arrow="horizontal" onClick={() => {
                           
                            ScorePopup([5, 5, 5, 5]).then(values => {
                                this.stateHanlde("step3",{targetScore:values.reduce((x,y)=>x+y)})
                            })
                        }}>
                            <Text style={{ color: "#999", fontSize: 16 }}>{this.state.step3.targetScore?this.state.step3.targetScore: '输入目标分数'}</Text>
                        </List.Item>

                    </List>
                    <List renderHeader={() => { return '已考成绩' }} >
                    <List.Item arrow="horizontal" onClick={() => {
                            ScorePopup([5, 5, 5, 5]).then(values => {
                                this.stateHanlde("step3",{examScore:values.reduce((x,y)=>x+y)})
                            })
                        }}>
                            <Text style={{ color: "#999", fontSize: 16 }}>{this.state.step3.examScore?this.state.step3.examScore: '输入已考成绩'}</Text>
                        </List.Item>
                    </List>
                    <View style={{ padding: 20 }}>
                        <Button
                            activeStyle={{ backgroundColor: constants.themeColor }}
                            type="primary"
                            style={{ backgroundColor: constants.themeColor, borderColor: constants.themeColor }}
                            onClick={this.handleBKClick}

                        >
                            下一步
                    </Button>
                    </View>
        
                </View>
            </View>
        )
    }
}
